<template>
	<view class="route">
		<view class="inner">
			<view class="item" @click="handleBuy(item)" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="" v-if="!item.isbuy">
						<u-tag text="未开通" size="mini" type="warning"></u-tag>

					</view>
					<view class="" v-if="item.isbuy&&!item.dq">
						<u-tag text="已开通" size="mini" type="success"></u-tag>
					</view>
					<view class="" v-if="item.isbuy&&item.dq">
						<u-tag text="已到期" size="mini" type="warning"></u-tag>
					</view>
					<view class="time" v-if="item.endTime">
						到期时间：{{item.endTime}}
					</view>
				</view>
				<view class="middle">
					<view class="name">
						<view class="text">
							{{item.name}}
						</view>

					</view>
					<view class="" v-if="isIos">
						<button open-type="contact" class="btn xufei">
							联系客服
						</button>
					</view>
					<view class="" v-if="!item.isbuy&&!isIos">
						<view class="btn">
							去购买
						</view>
					</view>
					<view class="" v-if="item.isbuy&&!isIos">
						<view class="btn xufei">
							去续费
						</view>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				isIos: false,
				list: [{
						name: '基础服务套餐',
						id: 1,
						key: 'wa',

					},
					{
						name: '收款服务套餐',
						id: 2,
						key: 'sk'
					},
					{
						name: '优惠券服务套餐',
						id: 3,
						key: 'yhj'
					},
					{
						name: '充值购服务套餐',
						id: 4,
						key: 'czg'
					},
					{
						name: '单品快卖服务套餐',
						id: 5,
						key: 'dpkm'
					},
					{
						name: '商城服务套餐',
						id: 6,
						key: 'sc'
					},
					{
						name: '会员服务套餐',
						id: 7,
						key: 'hy'
					},
					{
						name: '股东服务套餐',
						id: 8,
						key: 'gd'
					},

				]
			};
		},
		onShow() {
			const info = wx.getSystemInfoSync()
			this.isIos = !(info.system.indexOf('Android') > -1)
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$req.post('/shanghu/userInfo', {
					uid: uni.getStorageSync('uid')
				}).then((res) => {
					let info = res.data.data
					let arr = [...this.list]
					Object.keys(info).forEach((key) => {
						arr.forEach((item) => {

							if (key === item.key) {
								console.log(key, info[key], info[`${key}inttime`], 888)
								if (info[key] === 1 && info[`${key}inttime`] === 0) {
									item.isbuy = false
								}
								if (info[key] === 1 && info[`${key}inttime`] > 0) {
									item.isbuy = true
									item.dq = true
									item.endTime = dayjs.unix(info[`${key}endtime`]).format(
										`YYYY-MM-DD HH:mm:ss`)
								}
								if (info[key] === 2 && info[`${key}inttime`] > 0) {
									item.isbuy = true
									item.endTime = dayjs.unix(info[`${key}endtime`]).format(
										`YYYY-MM-DD HH:mm:ss`)
								}
							}
						})
					})
					this.list = arr
					console.log(this.list)
				})
			},
			handleBuy(data) {

				if (this.isIos) {
					return
				}
				if (!data.isbuy) {
					uni.navigateTo({
						url: '/pages/buy/buy?id=' + data.id
					})
					return
				}
				uni.navigateTo({
					url: '/pages/renew/renew?id=' + data.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	button {
		margin: 0;
		padding: 0;
		line-height: 35rpx;
		background-color: transparent;
	}

	button::after {
		border: none;
	}

	.route {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-top: 30rpx;
		padding-bottom: 60rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;

		.item {
			height: 160rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 30rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					font-size: 26rpx;
					color: #999;
				}
			}

			.middle {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 30rpx;
			}

			.name {
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				align-items: center;

				.tips {
					color: #999;
				}
			}

			.btn {
				font-size: 28rpx;
				color: #09f;
			}

			.xufei {
				color: #5ac725;
			}
		}
	}
</style>